<template>
  <div>
    <JfHeader :viewstyle="viewstyle"></JfHeader>
    <el-row class="personContent">
      <el-col :span="20" :offset="2">
        <el-row class="">
          <!-- 左侧头像 -->
          <el-col
            :span="6"
            :offset="2"
            class="person_message background_eee"
            style="text-align: center"
          >
            <el-row>
              <el-col style="margin-top: 50px" class="avatar_box"
                ><img :src="useList.avatarUrl" alt=""
              /></el-col>
            </el-row>
            <el-row>
              <el-col
                ><el-upload
                  class="upload-demo"
                  :headers="headerObj"
                  :action="uploadURL"
                  :show-file-list="false"
                  :on-success="handleSuccess"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">
                    只能上传jpg/png文件，且不超过500kb
                  </div>
                </el-upload></el-col
              >
            </el-row>
          </el-col>
          <!-- 右侧基本信息 -->
          <el-col :span="14" class="background_eee" style="height: 500px">
            <el-card class="box-card" style="height: 500px">
              <!-- 一层 标题和修改按钮 -->
              <div slot="header" class="clearfix">
                <span>基础信息</span>
                <el-button
                  style="float: right; padding: 3px 0"
                  type="text"
                  @click="dialogPWVisible = true"
                  >修改密码</el-button
                >
                <!-- 编辑个人信息弹窗 -->
                <el-dialog
                  title="修改密码"
                  :visible.sync="dialogPWVisible"
                  width="30%"
                >
                  <el-form
                    ref="ruleForm "
                    :rules="rules"
                    :model="ruleForm"
                    label-width="70px"
                  >
                    <el-form-item label="旧密码" prop="oldpass">
                      <el-input
                        type="password"
                        v-model="ruleForm.oldpass"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="pass">
                      <el-input
                        type="password"
                        v-model="ruleForm.pass"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                      <el-input
                        type="password"
                        v-model="ruleForm.checkPass"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-form>
                  <span slot="footer" class="dialog-footer">
                    <el-button
                      @click="(dialogPWVisible = false), resetForm('ruleForm')"
                      >取 消</el-button
                    >
                    <el-button type="primary" @click="editPassword"
                      >确 定</el-button
                    >
                  </span>
                </el-dialog>
                <!-- 编辑个人信息按钮 -->
                <el-button
                  style="float: right; padding: 3px 10px"
                  type="text"
                  @click="dialogVisible = true"
                  >编辑</el-button
                >
                <!-- 编辑个人信息弹窗 -->
                <el-dialog
                  title="编辑个人信息"
                  :visible.sync="dialogVisible"
                  width="30%"
                >
                  <el-form ref="addFormRef" :model="useList" label-width="70px">
                    <el-form-item label="姓名" prop="nickname">
                      <el-input v-model="useList.nickname"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                      <el-radio v-model="useList.userSex" label="0"
                        >女</el-radio
                      >
                      <el-radio v-model="useList.userSex" label="1"
                        >男</el-radio
                      >
                    </el-form-item>
                    <el-form-item label="手机号码" prop="phone">
                      <el-input v-model="useList.userTel"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                      <el-input v-model="useList.userEmail"></el-input>
                    </el-form-item>
                    <el-form-item label="爱好" prop="hobby">
                      <el-input v-model="useList.userHobby"></el-input>
                    </el-form-item>
                  </el-form>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="edit">确 定</el-button>
                  </span>
                </el-dialog>
              </div>
              <!-- 二层基本信息 -->
              <div class="text item personmg">
                <!-- 用户名 -->
                <el-col :span="4">姓名:</el-col>
                <el-col
                  :span="20"
                  style="border-bottom: 1px solid rgb(238, 238, 238)"
                >
                  <span>{{ useList.nickname }}</span>
                </el-col>
                <!-- 性别 -->
                <el-col :span="4">性别:</el-col>
                <el-col
                  :span="20"
                  style="border-bottom: 1px solid rgb(238, 238, 238)"
                >
                  <span>{{ useList.userSex == 0 ? "女" : "男" }}</span>
                </el-col>
                <!-- 电话号码 -->
                <!-- <el-col :span="4">电话:</el-col>
                <el-col
                  :span="20"
                  style="border-bottom: 1px solid rgb(238, 238, 238)"
                >
                  <span>{{ useList.userTel }}</span>
                </el-col> -->
                <!-- 邮箱地址 -->
                <el-col :span="4">邮箱:</el-col>
                <el-col
                  :span="20"
                  style="border-bottom: 1px solid rgb(238, 238, 238)"
                >
                  <span>{{ useList.userEmail }}</span>
                </el-col>
                <!-- 兴趣爱好 -->
                <el-col :span="4">兴趣:</el-col>
                <el-col
                  :span="20"
                  style="border-bottom: 1px solid rgb(238, 238, 238)"
                >
                  <span>{{ useList.userHobby }}</span>
                </el-col>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import JfHeader from "@/components/JfHeader.vue";
export default {
  name: "",
  data() {
    var validatePass0 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      viewstyle: "person",
      activeIndex: "1",
      activeIndex2: "1",
      activeName: "first",
      input: "",
      useList: {},
      avatarUrl: "../assets/logo.png",
      dialogVisible: false,
      dialogPWVisible: false,
      sex: "男",
      ruleForm: {
        oldpass: "",
        pass: "",
        checkPass: "",
      },
      rules: {
        oldpass: [{ validator: validatePass0, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
      // 上传图片的url地址
      uploadURL: "http://42.194.142.165:8088/front/mi/api/users/upload/avatar",
      // 图片上传组件的headers请求头对象
      headerObj: {
        Authorization: window.sessionStorage.getItem("token"),
      },
    };
  },
  components: {
    JfHeader,
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    async handleShowUser() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0)",
      });
      const { data: res } = await this.$axios.get("users/info", {});
      if (res.meta.status !== 200) {
        return this.$message.error("用户信息获取失败");
      }
      loading.close();

      if (res.data.avatarUrl !== null || res.data.avatarUrl !== "") {
        res.data.avatarUrl =
          "http://42.194.142.165:8088/sharePath/" + res.data.avatarUrl;
      } else {
        res.data.avatarUrl = "../assets/logo.png";
      }

      res.data.userSex = res.data.userSex == 0 ? "0" : "1";

      this.useList = res.data;

      console.log(res.data.userSex);
    },
    edit() {
      console.log(this.useList.userSex);
      this.$axios
        .put("users/put", {
          nickname: this.useList.nickname,
          userTel: this.useList.userTel,
          userSex: this.useList.userSex,
          userEmail: this.useList.userEmail,
          userHobby: this.useList.userHobby,
        })
        .then((res) => {
          if (res.data.meta.status === 200) {
            this.$message.success("编辑成功!");
            this.handleShowUser();
            this.dialogVisible = false;
          } else {
            this.$message({
              message: res.data.meta.msg,
              type: "error",
            });
            return false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    editPassword() {
      this.$axios
        .post("users/put/pwd?" + this.ruleForm.pass, {
          password: this.ruleForm.pass,
          oldPwd: this.ruleForm.oldpass,
        })
        .then((res) => {
          console.log(res);
          if (res.data.meta.status !== 200) {
            return this.$message.error("密码修改失败!");
          }
          this.$message.success("密码修改成功!");
          this.dialogVisible = false;
          window.sessionStorage.removeItem("token");
          this.$router.push("Login");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    async handleUDHeader() {
      const { data: res } = await this.$axios.post("users/upload/avatar", {});
      if (res.data.res) {
        this.$router.push();
      }
      console.log(res);
    },
    handleSuccess() {
      this.handleShowUser();
    },
    // users/upload/avatar
  },
  created() {
    this.handleShowUser();
  },
};
</script>

<style scoped>
.name_picture {
  position: absolute;
  right: 150px;
  top: 80px;
}
.el-col {
  min-height: 50px;
  line-height: 50px;
}
.personmg .el-col {
  text-align: start;
}
.personContent {
  padding-top: 80px;
}
.background_eee {
  background: rgb(238, 238, 238);
}
.person_message {
  height: 500px;
  line-height: 500px;
}
.avatar_box img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #fff;
}
</style>
